<!--
 * @Author: qinglong
 * @Date: 2021-04-19 17:08:12
 * @LastEditors: qinglong
 * @LastEditTime: 2021-05-14 09:33:18
 * @FilePath: \systemCenter\src\views\ftpManage\positionManage\userorgan\userOrganIndex.vue
 * @Description: 
-->

<template>
  <div class="userOrganIndex">
    <el-row :gutter="20">
      <el-col :span="18" class="content-left">
        <!-- 操作区域 -->
        <upper-template
          @search="searchForm.page=1,searchFunc()"
          @clear="
             (searchForm.treetypeCode = ''),
              (searchForm.treetypeName = ''),
              (searchForm.relatedDicttypeCode = '')
          "
        >
          <!-- 搜索区 -->
          <template slot="searchArea">
            <el-form
              :model="searchForm"
              ref="searchForm"
              label-width="100px"
              label-position="right"
              size="mini"
            >
              <el-form-item label="姓名：">
                <el-input v-model="searchForm.realName" placeholder="请输入姓名"></el-input>
              </el-form-item>

              <el-form-item label="用户名：" prop="userName">
                <el-input v-model="searchForm.userName" placeholder="请输入名称"></el-input>
              </el-form-item>

              <el-form-item label="所属机构：" prop="relatedDicttypeCode">
                <el-select
                  v-model="searchForm.relatedDicttypeCode"
                  placeholder="请选择"
                  style="width:100%"
                  clearable
                >
                  <el-option
                    v-for="item in relatedDicttypeCodeList"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="状态：" prop="userFlg">
                <el-select
                  v-model="searchForm.userFlg"
                  placeholder="请选择"
                  style="width:100%"
                  clearable
                >
                  <el-option
                    v-for="item in userFlagList"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </template>
          <!-- 显示隐藏区 -->
          <template slot="columnHide">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in textData"
                :label="item.prop"
                :disabled="item.checkDisabled"
                :checked="item.checkDisabled"
                :key="item.prop"
              >{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </template>
        </upper-template>

        <el-table ref="multipleTable" :data="tableData" style="width: 100%" @row-click="getTree">
          <el-table-column width="55" type="selection" ></el-table-column>
          <el-table-column
            v-for="(item, key) in showData"
            :key="key"
            :prop="item.prop"
            :label="item.label"
            :show-overflow-tooltip="true"
            :render-header="item.render"
            :sortable="item.sortable"
            :formatter="item.formatter"
            :width="item.width"
            :min-width="item.minwidth"
          ></el-table-column>
        </el-table>
        <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageNo"
          :total="total"
          :page-size="searchForm.pageSize"
          @refresh="searchFunc"
        ></pagination>
      </el-col>
      <el-col :span="6" class="content-right">
        <div class="title">
          <div style="float:left">
            <span class="gun"></span>
            {{ treeName }}
          </div>
          <div  style="float:right">
            <el-button type="button" @click="saveUserOrgan">保存</el-button>
          </div>
        </div>
    <!-- :render-content="renderTree" -->
        <vp-tree
          vp-title="用户-业务机构配置"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          :default-checked-keys="selectedTree"
          show-checkbox
          ref="userOrganTree"
          node-key="id"
          :footerBtn="false"
        ></vp-tree>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { systemManage, publicManage_pub, userOrgan } from "@/api/index";
export default {
  component: {},
  data() {
    return {
      total: 0,
      treeName: "高级功能",
      treeData: [],
      selectedTree: [],
      searchForm: {
        page: 1,
        size: 15
      },
      relatedDicttypeCodeList: [],

      //用户状态集合
      userFlagList: [],
      //选中的字段
      checkList: [],
      //隐藏显示的字段
      textData: [
        { prop: "userName", label: "用户名", checkDisabled: true },
        { prop: "realName", label: "姓名", checkDisabled: true },
        { prop: "orgName", label: "机构", checkDisabled: true },
        { prop: "userFlg", label: "状态", checkDisabled: true },
        {
          prop: "creator",
          label: "创建人",
          formatter: row => {
            return row.creator || "-";
          }
        },
        {
          prop: "createdTm",
          label: "创建时间",
          formatter: row => {
            return this.timeFormat(row.createdTm);
          }
        },
        {
          prop: "modifier",
          label: "修改人",
          formatter: row => {
            return row.modifier || "-";
          }
        },
        {
          prop: "modifiedTm",
          label: "修改时间",
          formatter: row => {
            return this.timeFormat(row.modifiedTm);
          }
        }
      ],
      //table表中数据
      tableData: [],
      //默认属性 树结构
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  created() {
    this.searchFunc();
  },
  computed: {
    //展示字段的
    showData() {
      let showData = [];
      console.log(this.checkList);
      console.log(this.textData);
      for (let i = 0; i < this.checkList.length; i++) {
        for (let j = 0; j < this.textData.length; j++) {
          if (this.checkList[i] === this.textData[j].prop) {
            let item = this.$clone(this.textData[j]);
            showData.push(item);
          }
        }
      }
      console.log(showData, "showData");
      return showData;
    }
  },
  mounted() {},
  watch: {},
  methods: {
    searchFunc() {
      let params = this.$clone(this.searchForm);
      systemManage.queryUserForPageForProject(params).then(res => {
        if ((res.code = 200)) {
          this.tableData = res.datas.rows;
          this.total = res.datas.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    renderTree() {},
    getTree(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
      let params = {
        userId: row.userId
      };
      userOrgan.treeOrganByUser(params).then(res => {
        if (res.code == 200) {
          this.treeData = res.data.organTree;
          this.selectedTree = res.data.selectedOrgan;
          console.log(this.treeData, "treeData......");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //保存业务机构配置 
    saveUserOrgan(){
        let selected = this.$refs.multipleTable.selection;
        if(selected.length !=1){
            return  this.$message.warning("请选择一条数据进行操作!!");
        }
        //获取到选中的节点编码 
        let organcodes =  this.$refs.userOrganTree.$tree.getCheckedNodes().map(v =>{
            return v.id;
        })
         console.log( organcodes," organcodelist ")
        let params={
                organCodes:organcodes,
                userId:selected[0].userId,
        }

        userOrgan.saveRelationByUser(params).then(res=>{
            if(res.code ==200){
                this.$message.success(res.message);
            }else{
                  this.$message.error(res.message);
            }
        })

        
    },
    renderTree(h, { node, data, store }) {
      return (
        <span title={data.id + "-" + data.name}>
          {data.id + "-" + data.name}
        </span>
      );
    },
    handleSizeChange(size) {
      this.searchForm.size = size;
      this.searchFunc();
    },
    handleCurrentChange(page) {
      this.searchForm.page = page;
      this.searchFunc();
    }
  }
};
</script>

<style>
</style>